<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    如下配置是作用于适配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="keywords" content="彼岸花,登录模板,www.higanbana.xin">
    <meta name="description" content="一个开源的登录模板，非常好看的UI设计">
    <title>登录</title>

<!--  开源项目url地址：
 https://gitee.com/huang-hai-deng
 -->
    <style>

        /*
        开源项目url地址：
 https://gitee.com/huang-hai-deng
        */
        /* 去掉默认样式 */
        *{
            margin: 0;
            padding: 0;
        }

        /* 添加背景颜色    */
        body{
            background: #74ebd5;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }

        /*
开源项目url地址：
https://gitee.com/huang-hai-deng
*/
/*================================================================================*/
        /* 登录  整体布局    main标签 */
        main{
            margin: 100px auto;
            width: 70%;
            height: 400px;
            background-color: rgba(250,250,250,0.5);
            display: flex;
            border-radius: 30px;
        }

        /*
开源项目url地址：
https://gitee.com/huang-hai-deng
*/
/*================================================================================*/
        /* 登录模块   */
        .main-left{
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main-left h2{  /* 文字 */
            color: #7F00FF;
            font-size: 3rem;
            font-family: 楷体;
        }

        .main-left-form{  /* 表单整体布局   form */
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main-left-form-email,.main-left-form-password{  /* 邮箱和密码的input */
            width: 75%;
            height: 40px;
            margin-top: 30px;
           border: deepskyblue 1px solid;
        }
        .main-left-form-email:hover{
            height: 42px;
        }
        .main-left-form-password:hover{
            height: 42px;
        }

        .main-left-form-submit{  /* 登录提交按钮 input */
            width: 40%;
            margin-top: 30px;
            padding: 5px 15px;
            border-radius: 10px;
            /* 背景颜色 */
            background: #7F00FF;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }
        .main-left-form-submit:hover{
            padding: 7px 17px;
        }

        .main-left-a{  /* 底部的导航栏   */
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
        }
        .main-left-a a{
            text-decoration: none;
            font-size:20px;
            font-family: "微軟正黑體 Light";
        }
        .main-left-a a:hover{
            color: red;
        }

        /*
        开源项目url地址：
 https://gitee.com/huang-hai-deng
        */
/*================================================================================*/
        /* 图片展示的模块 */
        .main-right{
            width: 50%;
            height: 100%;
            background-color: fuchsia;
        }
        .main-right img{  /* 图片的大小配置 */
            width: 100%;
            height: 100%;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }

        /*
        开源项目url地址：
 https://gitee.com/huang-hai-deng
        */
/*================================================================================*/
/*        响应式布局(断点布局   屏幕小于 1000px时，执行这段配置)*/
        @media (max-width: 1000px) {
            /*  主体的宽度为90%*/
            main{
                width: 90%;
            }
            /* 登录模块   */
            .main-left{
                width: 100%;
            }

            .main-left h2{  /* 文字 */
                font-size: 2rem;
            }

            .main-left-form{  /* 表单整体布局   form */
                width: 100%;
            }

            .main-left-form-email,.main-left-form-password{  /* 邮箱和密码的input */
                width: 85%;
            }

            .main-left-form-submit{  /* 登录提交按钮 input */
                width: 50%;
                color: deepskyblue;
                font-size: 15px;
                padding: 10px 0;
            }

        /*    隐藏图片 */
            .main-right{
                display: none;
            }
        }
        /*
开源项目url地址：
https://gitee.com/huang-hai-deng
*/
    </style>
</head>
<body>
<!--  开源项目url地址：
 https://gitee.com/huang-hai-deng
 -->
<main>

<!--    登录form表单-->
    <div class="main-left">
        <h2>登录</h2>
        <form class="main-left-form" method="post" action="#">
            <input name="email" type="email" class="main-left-form-email" placeholder="请输入邮箱:xxxx@qq.com">
            <input name="password" type="password" class="main-left-form-password" placeholder="请输入密码">
            <input value="登录" type="submit" class="main-left-form-submit">
        </form>

        <div class="main-left-a">
            <a href="#">返回首页</a>
            <a href="#">忘记密码</a>
            <a href="#">注册</a>
        </div>
    </div>
<!--开源项目url地址：
    https://gitee.com/huang-hai-deng
    -->

<!--    展示图片或者视频 -->
    <div class="main-right">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-12-05%2F5c078b4f258fe.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643082441&t=5679d3820b5a4c519174a69b681238dc">
    </div>

</main>
<!--  开源项目url地址：
 https://gitee.com/huang-hai-deng
 -->
</body>
</html>